<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="src/css/base.css">
    <link rel="stylesheet" href="src/css/style.css">
    <link rel="stylesheet" href="src/css/index.css">

    <script src="src/js/jquery-3.3.1.js"></script>
    <script src="src/js/animate.js"></script>

</head>
<body>
<div class="top">
    <p><a href="#"><img src="src/images/top.jpg" alt=""></a></p>
</div>
<div class="top-nav">
    <div class="top-inner">
        <div class="left">
            <span class="icon-home"></span><a href="#">第五大道首页</a>|
        </div>
        <div class="left2">
            <span class="icon-phone"></span><i>贵宾专线：4008-6767-38</i>
            <a href="#">登录 <b>|</b></a>
        </div>
        <div class="register">
            <img src="src/images/youli.gif"/><a href="register.html">注册 <i>|</i></a>
        </div>
        <div class="nav">
            <div class="nav-content">
                <a href="#">我的第五大道</a>
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#"> 我的收藏</a></li>
                    <li><a href="#">已购商品</a></li>
                    <li><a href="#">我的礼券</a></li>
                    <li><a href="#">我的积分</a></li>
                </ul>
                <div class="nav-logo"></div>
            </div>
        </div>
        <div class="help">
            <a href="#">帮助中心</a>
        </div>
        <div class="xz">
            <a href="#">手机版下载 <span class="icon-arrow-outline-down"></span></a>
            <!--<img src="images/qr.jpg" alt="">-->
        </div>

    </div>


</div>
<div class="header">
    <div class="logo">
        <a href="#"><img src="src/images/logo.jpg"></a>
    </div>
    <div class="yijian">
        <a href="#"><img src="src/images/yijian.jpg"></a>
    </div>
    <div class="search">
        <input placeholder="太阳镜" type="text">
        <button>搜索</button>
        <a href="#">连衣裙</a>
        <a href="#">美妆</a>
        <a href="#">运动户外</a>
        <a href="#">箱包</a>
        <a href="#">配饰</a>
        <a href="#">腕表</a>
    </div>
    <div class="haiwai">
        <i> <span class="icon-globe"></span>
            <h2>第五大道海外生活</h2></i>
        <img src="src/images/cart.png" alt="">
    </div>

</div>
<div class="nav-menu">
    <div class="menu">
        <ul>
            <li class="current"><a href="#">商品分类</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">最新</a></li>
            <li><a href="#">女士</a></li>
            <li><a href="#">男士</a></li>
            <li><a href="#">生活馆</a></li>
            <li><a href="#">海外馆</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">特惠</a></li>
            <li><a href="#">礼品区</a></li>
            <li><a href="#"><span class="icon-location"></span>到店</a></li>
            <li><a href="#"><img src="src/images/overseaslogo.gif" alt=""></a></li>
            <li><a href="#"><img src="src/images/ri.jpg" alt=""></a></li>
        </ul>
    </div>
</div>
<div class="lunbotu">
    <div class="box">
        <ul id="ul">
            <li><img src="src/images/lb1.jpg"/></li>
            <li><img src="src/images/lb2.jpg"/></li>
            <li><img src="src/images/lb3.jpg"/></li>
            <li><img src="src/images/lb4.jpg"/></li>
            <li><img src="src/images/lb5.jpg"/></li>
            <li><img src="src/images/lb6.jpg"/></li>
            <li><img src="src/images/lb7.jpg"/></li>
            <li><img src="src/images/lb8.jpg"/></li>
        </ul>
        <ol>

        </ol>
        <div class="leftbtn"><img src="src/images/leftbtn.png" alt=""></div>
        <div class="rightbtn"><img src="src/images/rightbtn.png" alt=""></div>
    </div>

</div>
<div class="mainx_brandship">

    <img src="src/images/mainx_brandship.png"/></div>
<ul class="brandship_list">
    <li><a href="#"><img src="src/images/bl.jpg" alt=""></a>
        <div class="bl">
            <a href="#"><img src="src/images/bl-1.png" alt="">
                <p></p>
                <span>Bally</span><i>巴利</i></a>
        </div>
    </li>


    <li><a href="#"><img src="src/images/da.jpg" alt=""></a>
        <div class="bl">
            <a href="#"><img src="src/images/da-1.png" alt="">
                <p></p>
                <span>Dior</span><i>迪奥</i></a>
        </div>
    </li>
    <li><a href="#"><img src="src/images/bs.jpg" alt=""></a>
        <div class="bl">
            <a href="#"><img src="src/images/bs-1.png" alt="">
                <p></p>
                <span>Hugo Boss</span><i>雨果.波士</i></a>
        </div>
    </li>
    <li><a href="#"><img src="src/images/lp-1.jpg" alt=""></a>
        <div class="bl">
            <a href="#"><img src="src/images/lp.png" alt="">
                <p></p>
                <span>Ray-Ban</span><i>雷朋</i></a>
        </div>
    </li>
    <li><a href="#"><img src="src/images/bj.jpg" alt=""></a>
        <div class="bl">
            <a href="#"><img src="src/images/bj-1.png" alt="">
                <p></p>
                <span>Breguet</span><i>宝玑</i></a>
        </div>
    </li>

</ul>

<div class="hotstore_t">
    <img src="src/images/hotstore_t.jpg" alt="">
</div>
<div class="brand">
    <ul>
        <li><a href="#"><img src="src/images/sp1.png" alt="">
            <div class="box"><i>巴利</i></div>
            <div class="line"></div>
        </a></li>


        <li><a href="#"><img src="src/images/sp2.png" alt="">
            <div class="box"><i>迪奥</i></div>
            <div class="line"></div>
        </a></li>

        <li><a href="#"><img src="src/images/sp3.png" alt="">
            <div class="box"><i>雨果.波士</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp4.png" alt="">
            <div class="box"><i>雷朋</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp5.png" alt="">
            <div class="box"><i>宝玑</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp6.jpg" alt="">
            <div class="box"><i>柏品</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp7.png" alt="">
            <div class="box"><i>波比布朗</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp8.png" alt="">
            <div class="box"><i>海蓝之谜</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp9.png" alt="">
            <div class="box"><i>阿玛尼</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp10.png" alt="">
            <div class="box"><i>菲拉格慕</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp11.png" alt="">
            <div class="box"><i>科颜氏</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp12.png" alt="">
            <div class="box"><i>宝格丽</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp13.png" alt="">
            <div class="box"><i>古驰</i></div>
            <div class="line"></div>
        </a></li>
        <li><a href="#"><img src="src/images/sp14.png" alt="">
            <div class="box"><i>Theonne</i></div>
            <div class="line"></div>
        </a></li>
    </ul>
</div>


<div class="sidebar">
    <ul>
        <li class="current"><a href="#"></a></li>
        <li><a href="#"></a>
            <div class="side">
                <img src="src/images/weixin_img.png" alt="">
            </div>
        </li>
        <li><a href="#"></a>
            <div class="side">意见反馈</div>
        </li>
        <li><a href="#"></a>
            <div class="side">联系我们</div>
        </li>
        <li><a id="back-top"></a>
            <div class="side"> <!--onclick="animate({scrollTop: 0},'slow')"-->回到顶部</div>
        </li>
    </ul>
</div>
<div class="hw-1">
    <img src="src/images/hw.jpg" alt="">
</div>
<div class="haiwai-life">
    <ul>
        <li>
            <div class="img"><img src="src/images/hw1.jpg" alt=""><i class="light"></i></div>
        </li>
        <li>
            <div class="img"><img src="src/images/hw2.jpg" alt=""><i class="light"></i></div>
        </li>
        <li>
            <div class="img"><img src="src/images/hw4.jpg" alt=""><i class="light"></i></div>
        </li>
        <li>
            <div class="img"><img src="src/images/hw3.jpg" alt=""><i class="light"></i></div>
        </li>
    </ul>
</div>
<div class="store">
    <img src="src/images/store.jpg" alt="">
</div>
<div class="tab-wrapper">
    <ul class="storesame_link">
        <li class="tab_li currentli">热卖品牌</li>
        <li class="tab_li">新品推荐</li>
        <li class="tab_li">生活方式</li>
    </ul>
    <div class="storesame">
        <div class="storesame_box currentbox">
            <div class="storesame-left"><img src="src/images/store1.jpg" alt="" style="width: 360px;height: 510px;">
            </div>
            <div class="storesame-right">
                <div class="storesame-right-top">
                    <ul>
                        <li class="top">
                            <div class="top-top">
                                <p>Hermes</p>
                                <p>爱马仕</p>
                                <p>￥ 8500</p>
                            </div>
                            <div class="top-bottom">
                                <a href="shop.html"><img src="src/images/ams.jpg" style="width: 220px;height: 240px;">
                                </a>
                            </div>
                        </li>
                        <li class="top">
                            <div class="top-top">
                                <p>Calvin Klein</p>
                                <p>卡尔文.克莱恩</p>
                                <p>￥ 1140</p>
                            </div>
                            <div class="top-bottom">
                                <a href="#"><img src="src/images/ke.jpg" style="width: 220px;height: 360px;"></a>
                            </div>
                        </li>
                        <li class="top">
                            <div class="top-top">
                                <p>OFF-WHITE</p>
                                <p></p>
                                <p>￥ 7008</p>
                            </div>
                            <div class="top-bottom">
                                <a href="#">
                                    <img src="src/images/nb.jpg" style="width: 200px;height: 300px;">
                                </a>
                            </div>
                        </li>
                    </ul>


                </div>
            </div>
        </div>
        <div class="storesame_box ">
            <div class="storesame-left"><img src="src/images/store2.jpg" alt="" style="width: 360px;height: 510px;">
            </div>
            <div class="storesame-right">
                <div class="storesame-right-top">
                    <ul>
                        <li class="top">
                            <div class="top-top">
                                <p>Hermes</p>
                                <p>爱马仕</p>
                                <p>￥ 8500</p>
                            </div>
                            <div class="top-bottom">
                                <a href=""><img src="src/images/store2-1.jpg" style="width: 220px;height: 240px;">
                                </a>
                            </div>
                        </li>
                        <li class="top">
                            <div class="top-top">
                                <p>Calvin Klein</p>
                                <p>卡尔文.克莱恩</p>
                                <p>￥ 1140</p>
                            </div>
                            <div class="top-bottom">
                                <a href="#"><img src="src/images/store2-2.jpg" style="width: 220px;height: 360px;"></a>
                            </div>
                        </li>
                        <li class="top">
                            <div class="top-top">
                                <p>OFF-WHITE</p>
                                <p></p>
                                <p>￥ 7008</p>
                            </div>
                            <div class="top-bottom">
                                <a href="#">
                                    <img src="src/images/store2-3.jpg" style="width: 200px;height: 300px;">
                                </a>
                            </div>
                        </li>
                    </ul>


                </div>
            </div>
        </div>
        <div class="storesame_box">
            <div class="storesame-left"><img src="src/images/store3.jpg" alt="" style="width: 360px;height: 510px;">
            </div>
            <div class="storesame-right">
                <div class="storesame-right-top">
                    <ul>
                        <li class="top">
                            <div class="top-top">
                                <p>Hermes</p>
                                <p>爱马仕</p>
                                <p>￥ 8500</p>
                            </div>
                            <div class="top-bottom">
                                <a href=""><img src="src/images/ams.jpg" style="width: 220px;height: 240px;">
                                </a>
                            </div>
                        </li>
                        <li class="top">
                            <div class="top-top">
                                <p>Calvin Klein</p>
                                <p>卡尔文.克莱恩</p>
                                <p>￥ 1140</p>
                            </div>
                            <div class="top-bottom">
                                <a href="#"><img src="src/images/ke.jpg" style="width: 220px;height: 360px;"></a>
                            </div>
                        </li>
                        <li class="top">
                            <div class="top-top">
                                <p>OFF-WHITE</p>
                                <p></p>
                                <p>￥ 7008</p>
                            </div>
                            <div class="top-bottom">
                                <a href="#">
                                    <img src="src/images/nb.jpg" style="width: 200px;height: 300px;">
                                </a>
                            </div>
                        </li>
                    </ul>


                </div>
            </div>
        </div>

    </div>
</div>

<div class="pop_bg">
    <div class="popup_main">

        <img src="src/images/foot_popup.png"/>
        <a></a>
    </div>
</div>
<div class="footer">

</div>
</body>
</html>
<script>

    //无缝轮播
    $(function () {
        var oUl = document.querySelector('.lunbotu .box ul');
        var oAll = document.querySelector('.lunbotu');//移入移除

        //1.拿都第一张
        var ocloneLi1 = document.querySelector('.lunbotu .box #ul li').cloneNode(true);
        oUl.appendChild(ocloneLi1);//克隆并且追加到最后一张
        //2.动态创建小圆点, -1

        var oLiAll = document.querySelectorAll('.lunbotu .box #ul li');
        for (var i = 0; i < oLiAll.length - 1; i++) {
            var newLi = document.createElement("li");

            newLi.index = i;
            newLi.onclick = function () {

                autoInex = dianIndex = this.index - 1;

                autoPlay();
            }
            if (i == 0) {
                newLi.className = "current";
            }

            document.querySelector(".lunbotu .box ol").appendChild(newLi)
        }

        var timer = setInterval(autoPlay, 3000);
        //3.自动轮播,
        var autoIndex = 0;
        var dianIndex = 0;

        function autoPlay() {
            autoIndex++;
            if (autoIndex >=8) {
                autoIndex = 1;

                oUl.style.left = "0px";
            }

            animate(oUl, -1 * autoIndex * 1210);

            dianIndex++;
            if (dianIndex >= 8) {
                dianIndex = 0;
            }

            var nextLis = document.querySelectorAll(".lunbotu ol li");


            for (var i = 0; i < nextLis.length; i++) {
                nextLis[i].className = "";
            }
            nextLis[dianIndex].className = "current";

        }


        //4.鼠标移入暂停定时器.

        oAll.onmouseenter = function () {

            clearInterval(timer);
        }


        //5.鼠标移除,开启定时器
        oAll.onmouseleave = function () {
            timer = setInterval(autoPlay, 3000);
        }

    })

    $(function () {
        var closeA = document.querySelector(".popup_main a");
        closeA.onclick = function () {
            this.parentNode.parentNode.style.display = "none";
        }
    })
    //tab栏切换
    $(function () {
       $(".tab-wrapper>.storesame_link>li").on("mouseenter",function () {
          $(this).addClass("currentli").siblings(".tab_li").removeClass("currentli");
          var $index=$(this).index();
          $(".storesame>.storesame_box").eq($index).addClass("currentbox").siblings(".storesame_box").removeClass("currentbox");
       })
        // var allLi = document.querySelectorAll(".storesame_link>li");
        // for (var i = 0; i < allLi.length; i++) {
        //     allLi[i].index = i;//记录索引号
        //     allLi[i].onmouseenter = function () {
        //         for (var i = 0; i < allLi.length; i++) {
        //
        //             allLi[i].className = "";
        //         }
        //         this.className = "currentli";//给自己加样式
        //     }
        // }


    })
    $(function () {
        $("#back-top").on("click", function () {
            $("html,body").animate({scrollTop: 0}, 200);
        })
    })

    $(function () {
        $(".footer").load('./footer.html',function () {
            //console.log("底部加载完成后执行");
        })
    })

</script>